<template>
  <div class="kiosk-container">
    <el-row class="dashboard-section">
      <quota-explain :info="topCard"></quota-explain>
    </el-row>
    <el-row class="dashboard-section" style="margin-top: 20px;">
        <chart-card>
          <div slot="card-head" class="chart-header">
            <div class="section-title">
              <i class="el-icon-data-analysis"></i>
              <span>数据分析</span>
            </div>
            <el-tabs v-model="tabName" class="custom-tabs">
              <el-tab-pane label="近一个月" name="visitNum">
                <el-row :gutter="24">
                  <el-col :span="16">
                    <div class="chart-title-container">
                      <h4 class="chart-title">每日点击量</h4>
                      <div class="chart-actions">
                        <el-tooltip content="刷新数据" placement="top">
                          <i class="el-icon-refresh cursor-pointer" @click="getHomeTongji"></i>
                        </el-tooltip>
                      </div>
                    </div>
                    <div class="chart-container">
                      <ve-histogram 
                        :settings="chartData.settings" 
                        height="400px"  
                        :legend-visible="false"  
                        v-for="(chartData,index) in chartList" 
                        :key="index" 
                        :data="chartData"
                        :extend="chartExtend">
                      </ve-histogram>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="chart-title-container">
                      <h4 class="chart-title">商户访问排行榜</h4>
                      <div class="chart-actions">
                        <el-tooltip content="查看全部" placement="top">
                          <i class="el-icon-more cursor-pointer"></i>
                        </el-tooltip>
                      </div>
                    </div>
                    <div class="rank-list-container">
                      <ul class="rank-list">
                          <li :key="index" v-for="(item, index) in rankList" class="rank-item">
                              <span class="rank-number" :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
                              <span class="rank-name">{{ item.name }}</span>
                              <span class="rank-count">{{ item.count }}次</span>
                          </li>
                      </ul>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </div>
        </chart-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import QuotaExplain from './QuotaExplain'
  import CountTo from 'vue-count-to'
  import ChartCard from './ChartCard'
  import CellNum from './CellNum'
  import VisitNum from './VisitNum'

  export default {
    name: 'Kiosk',
    components: {
      CountTo,
      CellNum,
      VisitNum,
      ChartCard,
      QuotaExplain
    },
    data() {
      return {
        tabName: 'visitNum',
        topCard: {
          merchant: {
            total: 1,
            work: 0,
            duration: 3000
          },
          kiosk: {
            total: 1,
            work: 0,
            duration: 3000
          }
        },
        chartList: [],
        rankList: [],
        chartExtend: {
          color: ['#1890ff'],
          grid: {
            top: 60,
            bottom: 30,
            left: 60,
            right: 30
          },
          xAxis: {
            axisLabel: {
              color: '#666'
            }
          },
          yAxis: {
            axisLabel: {
              color: '#666'
            }
          }
        }
      }
    },
    mounted() {
      this.getHomeTongji()
    },
    activated() {

    },
    methods: {
      getHomeTongji() {
        this.$http({
          url: '/smis/tongji/jfKioskTongji/getHomeTongji',
          method: 'get',
          params: {
          }
        }).then(({ data }) => {
          if (data && data.success) {
            this.topCard = {
              merchant: {
                total: data.merchantTotal,
                work: data.merchantWork,
                duration: 3000
              },
              kiosk: {
                total: data.kioskTotal,
                work: data.kioskWork,
                duration: 3000
              }
            };

            var clickList = data.clickList || []
            var chartClick = {}
            chartClick.settings = {
              legendHoverLink: true,
              metrics: ['点击量'],
              xAxisType: 'time',
              yAxisName: ['次'],
              itemStyle: {
                color: '#409EFF'
              }
            }
            chartClick.columns = ['日期', '点击量']
            chartClick.rows = []
            clickList.forEach((item)=>{
              chartClick.rows.push({
                '日期': item.createTime, '点击量': item.count
              })
            })
            this.chartList = [chartClick]

            // 排行榜
            this.rankList = data.merchantList || []

          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
.kiosk-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 10px;
}

.dashboard-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  
  i {
    margin-right: 8px;
    color: #1890ff;
  }
}

.chart-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.chart-actions {
  i {
    color: #909399;
    font-size: 16px;
    cursor: pointer;
    
    &:hover {
      color: #1890ff;
    }
  }
}

.chart-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.rank-list-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.rank-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.rank-number {
  background-color: #f5f5f5;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 15px;
  color: #666;
  
  &.active {
    background-color: #314659;
    color: #fff;
  }
}

.rank-name {
  flex: 1;
  font-size: 14px;
  color: #606266;
}

.rank-count {
  font-size: 14px;
  color: #1890ff;
  font-weight: 500;
}

.custom-tabs {
  /deep/ .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #e4e7ed;
  }
  
  /deep/ .el-tabs__item {
    font-size: 14px;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
  }
}
</style>